<template>
  <el-tabs :value="activeItem" @tab-remove="closeTab" class="content-body" @tab-click="tabClick">
    <el-tab-pane label="首页" name="11">
      <admin-index></admin-index>
    </el-tab-pane>
    <el-tab-pane
      v-for="item in tabs"
      :label="item.label"
      :key="String(item.index)"
      :name="String(item.index)"
      :closable="item.closable"
    >
      <async-component :componentPath="item.component"></async-component>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import AdminIndex from "@/pages/index/index";
import { mapActions, mapState, mapMutations } from "vuex";
import AsyncComponent from "./AsyncComponent";

export default {
  data() {
    return {
    };
  },
  computed: {
    ...mapState({
      tabs: state=>state.menu.tabs,
      activeItem: state=>state.menu.activeItem
    })
  },
  mounted() {},
  methods: {
    ...mapActions({
      closeTab: "closeTab"
    }),
    ...mapMutations({
      switchTab: "switchTab"
    }),
    tabClick(e) {
      this.switchTab(e.name);
    }
  },
  components: {
    AdminIndex,
    AsyncComponent
  }
};
</script>
<style scoped>
.content-body {
  height: 100%;
}
</style>


